<template>
  <view class="login-container">
    <!-- 品牌标识 -->
    <view class="brand-wrapper">
      <image class="logo" src="/static/yueka.png" mode="aspectFit" />
      <text class="slogan">悦咖音乐工作室</text>
    </view>

    <!-- 登录表单 -->
    <view class="form-wrapper">
      <!-- 手机号输入 -->
      <view class="input-wrapper">
        <image class="icon" src="/static/icon/icon-phone-orange.png" />
        <input
          v-model="mobile"
          class="input"
          placeholder=" "
          placeholder-class="placeholder"
          type="number"
          maxlength="11"
          @focus="handleFocus(0)"
          @blur="handleBlur(0)"
        />
        <label class="floating-label">手机号</label>
        <view class="underline" :class="{active: activeIndex === 0}"></view>
      </view>

      <!-- 提示信息 -->
      <view class="tip-text">
        <text>输入手机号即可登录</text>
      </view>

      <!-- 登录按钮 -->
      <button 
        class="login-btn"
        :class="{active: canLogin}"
        :disabled="!canLogin"
        @click="handleLogin"
        hover-class="none"
      >
        <text class="btn-text">登 录</text>
        <view class="arrow"></view>
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
import {http} from '@/utils/http.js'

const mobile = ref('');
const activeIndex = ref(-1);

const canLogin = computed(() => {
  return /^1[3-9]\d{9}$/.test(mobile.value);
});

const handleFocus = (index) => {
  activeIndex.value = index;
};

const handleBlur = () => {
  activeIndex.value = -1;
};

const handleLogin = () => {
  if (!canLogin.value) return;
  
  uni.showLoading({
    title: '登录中...'
  });
  
  
  http({
  	url: '/student/login',
  	method: 'post',
  	data: {
  		phone: mobile.value
  	}
  }).then(res => {
	  console.log(res)
	  uni.setStorageSync("token", res.data.token)
	  uni.setStorageSync("userInfo", JSON.stringify(res.data))
	  uni.hideLoading();
	  uni.showToast({
	    title: '登录成功',
	    icon: 'success'
	  });
	  uni.switchTab({
	    url: '/pages/index/index'
	  });
  })
};
</script>

<style scoped>
/* 基础样式 */
.login-container {
  height: 93vh;
  background: linear-gradient(180deg, #fff3e9 0%, #ffffff 100%);
  padding: 60rpx 72rpx;
  box-sizing: border-box;
}

/* 品牌标识 */
.brand-wrapper {
  margin: 0rpx 0 120rpx;
  text-align: center;
}

.logo {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 24rpx;
  filter: drop-shadow(0 8rpx 16rpx rgba(237, 130, 2, 0.1));
}

.slogan {
  font-size: 36rpx;
  color: #ed8202;
  letter-spacing: 2rpx;
  font-weight: 500;
}

/* 输入框样式 */
.input-wrapper {
  margin-bottom: 40rpx;
  position: relative;
}

.icon {
  width: 48rpx;
  height: 48rpx;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.input {
  width: 70vw;
  height: 96rpx;
  padding: 0 100rpx 0 72rpx;
  font-size: 34rpx;
  color: #333;
  border-bottom: 2rpx solid #eee;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all 0.3s;
  position: relative;
  z-index: 1;
}

.placeholder {
  opacity: 0;
}

.floating-label {
  position: absolute;
  left: 72rpx;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  font-size: 34rpx;
  transition: all 0.3s;
  pointer-events: none;
  z-index: 2;
  max-width: calc(100% - 172rpx);
  overflow: hidden;
  text-overflow: ellipsis;
}

.input:focus + .floating-label,
.input:not(:placeholder-shown) + .floating-label {
  transform: translateY(-180%);
  font-size: 28rpx;
  color: #ed8202;
}

.underline {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 4rpx;
  background: #ed8202;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.underline.active {
  width: 100%;
}

/* 登录按钮 */
.login-btn {
  width: 100%;
  height: 96rpx;
  background: #ffd8b8;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  border: none;
}

.login-btn.active {
  background: #ed8202;
  box-shadow: 0 12rpx 24rpx rgba(237, 130, 2, 0.2);
}

.btn-text {
  color: #fff;
  font-size: 36rpx;
  font-weight: 600;
  letter-spacing: 4rpx;
  margin-right: 16rpx;
  transition: all 0.3s;
}

.arrow {
  width: 24rpx;
  height: 24rpx;
  border-top: 4rpx solid #fff;
  border-right: 4rpx solid #fff;
  transform: rotate(45deg);
  margin-top: -4rpx;
  opacity: 0;
  transition: all 0.3s;
}

.login-btn.active .arrow {
  opacity: 1;
  margin-left: 16rpx;
}


.tip-text{
  color: #ed8202;
  text-align: right;
  margin-bottom: 40rpx;
}


/* 响应式调整 */
@media (max-width: 375px) {
  .login-container {
    padding: 40rpx 48rpx;
  }

  .brand-wrapper {
    margin: 60rpx 0 100rpx;
  }

  .logo {
    width: 160rpx;
    height: 160rpx;
  }

  .input {
    padding-right: 88rpx;
    font-size: 30rpx;
  }

  .floating-label {
    font-size: 30rpx;
    max-width: calc(100% - 160rpx);
  }
}
</style>